<template>
  <div class="ai_box">
    <!-- v-draggable="handleDrag" custom-class="draggable-dialog" -->
    <h-ai-dialog
      :title-header="false"
      :class="[
        sideTheme === 'theme-dark' ? 'dialog_theme' : 'dialog_theme_light',
      ]"
      :fullscreen="fullscreen"
      @close="close"
      :visible.sync="dialogVisible"
    >
      <div ref="myDialog" class="my_bialog">
        <handle ref="handle" class="handle" @changeChat="changeChat"></handle>
        <chat-window ref="chatWindow" @close="close"></chat-window>
      </div>
    </h-ai-dialog>
  </div>
</template>

<script>
// import './draggable' // 拖动 指令

import ChatWindow from "./components/ChatWindow.vue";
import Handle from "./components/Handle.vue";
import HAiDialog from "./components/utils/HAiDialog.vue";

export default {
  components: { Handle, ChatWindow, HAiDialog },
  data() {
    return {
      dialogVisible: false,
    };
  },
  mounted() {
    // 监听 Ctrl+K
    window.addEventListener("keydown", this.handleEvent);
  },
  computed: {
    // 主题
    sideTheme() {
      return this.$store.state.settings.sideTheme;
    },
    // show 弹窗
    showAideIA() {
      return this.$store.state.aiChat.showAideIA;
    },
    // 全屏
    fullscreen() {
      return this.$store.state.aiChat.fullscreen;
    },
  },
  watch: {
    fullscreen() {
      this.resizeHandler();
    },
    showAideIA() {
      if (this.showAideIA) {
        this.getChatData();
        this.resizeHandler();
      }
      this.dialogVisible = this.showAideIA;
    },
  },
  mounted() {
    window.addEventListener("resize", this.resizeHandler);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
    window.removeEventListener("keydown", this.handleEvent);
  },
  methods: {
    // 监测 窗口大小
    resizeHandler() {
      this.$nextTick(() => {
        if (this.$refs.myDialog) {
          const width = this.$refs.myDialog.offsetWidth;
          let type = width > 990 ? "max" : "min";
          this.$store.commit("aiChat/SET_WIDTH_SIZE_TYPE", type);
        }
      });
    },
    // ctrl+k 获取焦点
    async handleEvent(event) {
      switch (event.keyCode) {
        case 75:
          document.getElementById("inputText").focus();
          // event.preventDefault();
          event.returnValue = false; // 阻止直接保存网页
          break;
      }
      event.preventDefault();
    },
    close() {
      this.$store.dispatch("aiChat/changeAideIA", false);
    },
    changeChat() {
      this.$refs.chatWindow.changeChat();
    },
    getChatData() {
      this.$store.dispatch("aiChat/getChatData");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style/index.scss";
.ai_box {
  .my_bialog {
    display: flex;
    height: 100%;
    width: 100%;
  }
}
</style>
<style>
@import "./style/css.scss";
</style>
